<!Doctype html>
<html>
<head>
  <title>企业门户网站</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
      /* Reset */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    /* 头部 */
    header {
      background-color: #fff;
      box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
      padding: 20px;
    }

    nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    nav li {
      margin: 0;
      padding: 0;
    }

    nav a {
      color: #333;
      text-decoration: none;
      font-weight: bold;
      padding: 10px;
      transition: 0.3s ease;
    }

    nav a:hover {
      background-color: #333;
      color: #fff;
    }

    /* 主要内容 */
    .banner {
      background-image: url(imgs/b1.jpg);
      background-size: cover;
      background-position: center;
      height: 500px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .banner h1 {
      font-size: 50px;
      color: #fff;
      text-align: center;
      margin: 0 0 20px 0;
    }

    .banner strong {
      font-weight: bold;
    }

    .banner p {
      font-size: 24px;
      color: #fff;
      text-align: center;
      margin: 0 0 30px 0;
    }

    .banner a {
      background-color: #333;
      color: #fff;
      padding:15px 30px;
      border-radius: 30px;
      text-align: center;
      text-decoration: none;
      transition: 0.3s ease;
    }

    .banner a:hover {
      background-color: #fff;
      color: #333;
    }

    .services {
      background-color: #f5f5f5;
      padding: 50px 0;
    }

    .services h2 {
      text-align: center;
      font-size: 40px;
      margin: 0 0 30px 0;
    }

    .services ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .services li {
      margin: 0 20px;
      padding: 20px;
      box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
      flex-basis: calc((100% / 3) - 40px);
      text-align: center;
    }

    .services img {
      width: 200px;
      height: 200px;
      object-fit: cover;
      margin: 0 0 20px 0;
      border-radius: 50%;
    }

    .services h3 {
      font-size: 30px;
      margin: 0 0 10px 0;
    }

    .services p {
      font-size: 16px;
      color: #666;
      margin: 0 0 20px 0;
    }

    .about {
      background-color: #fafafa;
      padding: 50px;
      text-align: center;
    }

    .about h2 {
      font-size: 40px;
      margin: 0 0 30px 0;
    }

    .about p {
      font-size: 16px;
      color: #666;
      margin: 0 0 30px 0;
    }

    .about a {
      background-color: #333;
      color: #fff;
      padding:15px 30px;
      border-radius: 30px;
      text-align: center;
      text-decoration: none;
      transition: 0.3s ease;
    }

    .about a:hover {
      background-color: #fff;
      color: #333;
    }

    .contact {
      background-color: #fff;
      padding: 50px;
      text-align: center;
    }

    .contact h2 {
      font-size: 40px;
      margin: 0 0 30px 0;
    }

    form {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }

    label {
      font-size: 16px;
      color: #333;
      margin: 0 10px 10px 0;
    }

    input,
    textarea {
      padding: 10px;
      line-height: 1.5;
      font-size: 16px;
      border-radius: 5px;
      border: 1px solid #ccc;
      flex-basis: 100%;
      margin-bottom: 20px;
    }

    textarea {
      height: 150px;
    }

    button[type="submit"] {
      background-color: #333;
      color: #fff;
      padding: 10px 25px;
      border-radius: 30px;
      text-align: center;
      text-decoration: none;
      transition: 0.3s ease;
      font-size: 16px;
      border: none;
      cursor: pointer;
    }

    button[type="submit"]:hover {
      background-color: #fff;
      color: #333;
      border: 1px solid #333;
    }

    /* 页脚 */
    footer {
      background-color: #333;
      padding: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #fff;
    }

    footer ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    footer li {
      margin: 0 10px;
    }

    footer a {
      color: #fff;
      text-decoration: none;
    }

    footer p {
      font-size: 14px;
      margin: 0;
    }
  </style>
</head>
<body>
<header>
  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">产品</a></li>
      <li><a href="#">关于我们</a></li>
      <li><a href="#">联系我们</a></li>
    </ul>
  </nav>
</header>

<main>
  <section class="banner">
    <h1>欢迎来到<strong>企业门户网站</strong></h1>
    <p>我们提供高效，专业的服务</p>
    <a href="#">了解更多</a>
  </section>

  <section class="services">
    <h2>我们的服务</h2>
    <ul>
      <li>
        <img src="service1.jpg" alt="服务1">
        <h3>服务1</h3>
        <p>这里是服务1的描述</p>
      </li>
      <li>
        <img src="service2.jpg" alt="服务2">
        <h3>服务2</h3>
        <p>这里是服务2的描述</p>
      </li>
      <li>
        <img src="service3.jpg" alt="服务3">
        <h3>服务3</h3>
        <p>这里是服务3的描述</p>
      </li>
    </ul>
  </section>

  <section class="about">
    <h2>关于我们</h2>
    <p>这里是关于我们的描述</p>
    <a href="#">了解更多</a>
  </section>

  <section class="contact">
    <h2>联系我们</h2>
    <form>
      <label>姓名：</label>
      <input type="text" name="name" required>
      <label>电子邮件：</label>
      <input type="email" name="email" required>
      <label>电话：</label>
      <input type="tel" name="phone">
      <label>消息：</label>
      <textarea name="message"></textarea>
      <button type="submit">提交</button>
    </form>
  </section>
</main>

<footer>
  <ul>
    <li><a href="#">隐私政策</a></li>
    <li><a href="#">版权声明</a></li>
    <li><a href="#">使用条款</a></li>
  </ul>
  <p>&copy; 企业门户网站 2021</p>
</footer>
</body>
</html>
